<script setup>
import {iconNames} from "@utils/icons";

const props = defineProps({
  modelValue: {
    type: String,
    default: ""
  },
})

const emit = defineEmits(['update:modelValue'])

const icons = iconNames.map(s => ({
  value: s,
  label: s
}))

</script>
<template>
  <el-row>
    <el-col :span="24">
        <el-select v-model="modelValue" filterable placeholder="请选择" style="width: 100%" @change="emit('update:modelValue',$event)">
        <template #prefix>
          <el-icon>
            <component :is="modelValue"></component>
          </el-icon>
        </template>
        <el-option
            v-for="item in icons"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          <el-icon>
            <component :is="item.value"></component>
          </el-icon>
          {{ item.value }}
        </el-option>
      </el-select>
    </el-col>
  </el-row>

</template>

<style scoped>
</style>
